<template>
  <div class="q-pa-md">
    <div class="row q-col-gutter-md">
      <div class="col-12 col-md-6">
        <h6>基础用法</h6>
        <cascade-select
          v-model="selected1"
          :options="options"
          placeholder="请选择地区"
          outlined
          hide-bottom-space
          clearable
          class="no-label-select"
          @change="onChange"
        />
        <div class="q-mt-sm">选中值: {{ selected1 }}</div>
      </div>

      <div class="col-12 col-md-6">
        <h6>自定义字段名</h6>
        <cascade-select
          v-model="selected2"
          :options="customOptions"
          placeholder="请选择选项"
          value-key="id"
          label-key="name"
          children-key="sub"
          outlined
          hide-bottom-space
          clearable
          class="no-label-select"
        />
      </div>

      <div class="col-12 col-md-6">
        <h6>返回完整路径</h6>
        <cascade-select
          v-model="selected3"
          :options="options"
          placeholder="请选择地区"
          return-full-path
          :panel-titles="['省份', '城市', '区县']"
          outlined
          hide-bottom-space
          class="no-label-select"
        />
      </div>

      <div class="col-12 col-md-6">
        <h6>在表单中使用</h6>
        <q-form @submit="onSubmit" class="q-gutter-md">
          <cascade-select
            v-model="formData.area"
            :options="options"
            placeholder="请选择地区"
            outlined
            hide-bottom-space
            class="no-label-select"
            :rules="[(val) => !!val || '请选择地区']"
          />
          <div>
            <q-btn label="提交" type="submit" color="primary" />
          </div>
        </q-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CascadeSelect from './common/FyCascadeSelect.vue'

const selected1 = ref(null)
const selected2 = ref(null)
const selected3 = ref([])
const formData = ref({
  area: null,
})

const options = [
  {
    value: 'guangdong',
    label: '广东省',
    children: [
      {
        value: 'guangzhou',
        label: '广州市',
        children: [
          {
            value: 'tianhe',
            label: '天河区',
          },
          {
            value: 'haizhu',
            label: '海珠区',
          },
        ],
      },
      {
        value: 'shenzhen',
        label: '深圳市',
        children: [
          {
            value: 'futian',
            label: '福田区',
          },
          {
            value: 'nanshan',
            label: '南山区',
          },
        ],
      },
    ],
  },
  {
    value: 'zhejiang',
    label: '浙江省',
    disabled: true,
    children: [
      {
        value: 'hangzhou',
        label: '杭州市',
      },
    ],
  },
]

const customOptions = [
  {
    id: '1',
    name: '选项1',
    sub: [
      {
        id: '1-1',
        name: '选项1-1',
      },
    ],
  },
]

const onChange = (value, path) => {
  console.log('value:', value)
  console.log('full path:', path)
}

const onSubmit = () => {
  console.log('form submitted:', formData.value)
}
</script>

<style>
/* 移除 label 空间并调整输入框样式 */
.no-label-select :deep(.q-field__control) {
  height: 40px;
}

.no-label-select :deep(.q-field__marginal) {
  height: 40px;
}

/* 确保实线边框 */
.no-label-select.q-field--outlined :deep(.q-field__control:before) {
  border-style: solid !important;
  border-width: 1px !important;
}

/* 确保悬停和聚焦时也是实线 */
.no-label-select.q-field--outlined :deep(.q-field__control:hover:before) {
  border-style: solid !important;
  border-width: 1px !important;
}

.no-label-select.q-field--outlined :deep(.q-field__control:focus:before) {
  border-style: solid !important;
  border-width: 1px !important;
}

/* 移除底部虚线 */
.no-label-select.q-field--outlined :deep(.q-field__control:after) {
  border: none !important;
}
</style>
